<template>
  <v-container id="data-tables" tag="section">
    <base-material-card color="indigo" icon="mdi-text" inline class="px-5 py-3">
      <template v-slot:after-heading>
        <div class="display-2 font-weight-light">
          菜单信息
        </div>
      </template>
      <v-card-title>
        <v-btn raised color="light-blue lighten-1" @click="handleAdd">新增菜单</v-btn>
        <v-spacer></v-spacer>
        <v-text-field
            v-model="search"
            append-icon="mdi-magnify"
            class="ml-auto"
            label="查询"
            hide-details
            single-line
            style="max-width: 250px;"
        />
      </v-card-title>
      <v-divider class="mt-3"/>
      <v-app>
        <v-data-table
            dense
            disable-sort
            :headers="headers"
            :items="cars"
            item-key="id"
            group-by="parentId"
            :loading="loading"
            loading-text="数据加载中... 请稍等"
            :search="search" :must-sort="true" :footer-props="this.dataTableFooterProps"
        >
          <template v-slot:group.header="{items, isOpen, toggle}">
            <td width="20%">
              <v-icon @click="toggle" dense>
                {{ isOpen ? 'mdi-chevron-down' : 'mdi-chevron-up' }}
              </v-icon>
              {{ items[0].name }}
            </td>
            <td width="5%">
              <v-icon>
                {{ items[0].icon }}
              </v-icon>
            </td>
            <td width="30%"></td>
            <td width="20%">
              {{ items[0].createTime }}
            </td>
            <td width="10%">
              {{ items[0].sort }}
            </td>
            <td width="15%"></td>
          </template>
          <template v-slot:item="{ item }">
            <tr v-for="child in item.children">
              <td class="pl-lg-14">{{ child.name }}</td>
              <td>
                <v-icon>{{ child.icon }}</v-icon>
              </td>
              <td>{{ child.path }}</td>
              <td>{{ child.createTime }}</td>
              <td>{{ child.sort }}
              </td>
              <td >
                  <v-btn class="px-1 ml-1" color="success" dark small @click="handleEdit(item.deptId)">编辑
                    <v-icon dark>mdi-pencil</v-icon>
                  </v-btn>
                  <v-btn class="px-1 ml-1" color="error" dark small @click="handleDelete(item.deptId)">删除
                    <v-icon dark>mdi-close</v-icon>
                  </v-btn>
              </td>
            </tr>
          </template>
        </v-data-table>
      </v-app>
    </base-material-card>
  </v-container>
</template>

<script>
export default {
  name: "Index",
  data: () => ({
    search: null,
    headers: [
      {text: '菜单名称', value: 'name'},
      {text: '图标', value: 'icon'},
      {text: '路径', value: 'path'},
      {text: '创建时间', value: 'createTime'},
      {text: '排序', value: 'sort'},
      {text: '操作', value: 'option',sortable: false, align: 'end', filterable: false}
    ],
    cars: [
      {
        id: 1,
        name: '系统管理',
        icon: 'mdi-cogs',
        path: 'system',
        sort: 0,
        createTime: '2021-05-26 14:23:24',
        children: [
          {
            id: 3,
            name: '用户管理',
            parentId: 1,
            icon: 'mdi-account',
            path: 'system',
            createTime: '2021-05-26 14:23:24',
            sort: 0
          },
          {
            id: 4,
            name: '部门管理',
            parentId: 1,
            icon: 'mdi-lan',
            path: 'system',
            createTime: '2021-05-26 14:23:24',
            sort: 0
          },
          {
            id: 5,
            name: '菜单管理',
            parentId: 1,
            icon: 'mdi-folder-multiple',
            path: 'system',
            createTime: '2021-05-26 14:23:24',
            sort: 0
          },
        ],

      }
    ],
    items: [
      {
        id: 1,
        name: 'Applications :',
        children: [
          { id: 2, name: 'Calendar : app' },
          { id: 3, name: 'Chrome : app' },
          { id: 4, name: 'Webstorm : app' },
        ],
      },
      {
        id: 5,
        name: 'Documents :',
        children: [
          {
            id: 6,
            name: 'vuetify :',
            children: [
              {
                id: 7,
                name: 'src :',
                children: [
                  { id: 8, name: 'index : ts' },
                  { id: 9, name: 'bootstrap : ts' },
                ],
              },
            ],
          },
          {
            id: 10,
            name: 'material2 :',
            children: [
              {
                id: 11,
                name: 'src :',
                children: [
                  { id: 12, name: 'v-btn : ts' },
                  { id: 13, name: 'v-card : ts' },
                  { id: 14, name: 'v-window : ts' },
                ],
              },
            ],
          },
        ],
      },
      {
        id: 15,
        name: 'Downloads :',
        children: [
          { id: 16, name: 'October : pdf' },
          { id: 17, name: 'November : pdf' },
          { id: 18, name: 'Tutorial : html' },
        ],
      },
      {
        id: 19,
        name: 'Videos :',
        children: [
          {
            id: 20,
            name: 'Tutorials :',
            children: [
              { id: 21, name: 'Basic layouts : mp4' },
              { id: 22, name: 'Advanced techniques : mp4' },
              { id: 23, name: 'All about app : dir' },
            ],
          },
          { id: 24, name: 'Intro : mov' },
          { id: 25, name: 'Conference introduction : avi' },
        ],
      },
    ],
  }),
  created() {
    this.getList()
  },
  methods: {
    getList() {
      this.loading = false;
    },
    handleAdd() {

    },
    handleEdit() {

    },
    handleDelete() {

    }
  }
}
</script>

<style scoped>

</style>
